<template>
  <h1>{{ person.name }}</h1>
  <h1>{{ person.age }}</h1>
  <h1>{{ person.job.type }}</h1>
  <h1>{{ person.job.salary }}</h1>
  <h1>{{ person.job.a.b.c }}</h1>
  <h1>爱好：{{ person.hobby[0] }}</h1>
  <button @click="changeInfo">更改信息</button>
</template>

<script>
import { reactive } from "vue";
export default {
  setup() {
    let person = reactive({
      name: "张三",
      age: 18,
      job: {
        type: "前端",
        salary: "10K",
        a: {
          b: {
            c: "c",
          },
        },
      },
      hobby: ["抽烟", "喝酒", "烫头"],
    });

    function changeInfo() {
      person.name = "李四";
      person.age = 48;

      // (1)reactive直接转化成 proxy{type: '前端',salary:'10K'},这样就可以像正常访问数据并修改后直接相应
      person.job.type = "UI设计师";
      person.job.salary = "20K";
      // (2)reactive对于对象的处理是深层次的----灵活
      person.job.a.b.c = "C";
      person.hobby[0] = "学习";
      
    }

    return {
      changeInfo,
      person,
    };
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
